<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">男女生身高体重统计</div>
      <div class="sub_title">身高体重统图</div>
    </div>
    <div id="point_basic" style="width: 100%"></div>
    <el-switch v-model="ifChangeShape" @change="changeShape" active-text="不同形状" />
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
      ifChangeShape: false,
      dataList: [],
    };
  },
  mounted() {
    fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json")
      .then((res) => res.json())
      .then((data) => {
        this.chart = new Chart({
          container: "point_basic",
          autoFit: true,
          height: 500,
          padding: [40, 80, 80, 80],
        });
        // 数据格式： [{"gender":"female","height":161.2,"weight":51.6}]
        this.chart.data(data);
        // 设置度量
        this.chart.scale({
          height: { nice: true, alias: "身高" },
          weight: { nice: true, alias: "体重" },
        });
        // 设置weight坐标轴title
        this.chart.axis("weight", {
          title: {
            // 文字样式
            style: {
              fontSize: 16, // 文本大小
              textAlign: "center", // 文本对齐方式
            },
            // 文字偏移量
            offset: 60,
          },
        });
        // 设置height坐标轴title
        this.chart.axis("height", {
          title: {
            // 文字样式
            style: {
              fontSize: 16, // 文本大小
              textAlign: "center", // 文本对齐方式
            },
            // 文字偏移量
            offset: 40,
          },
        });
        // 设置提示工具
        this.chart.tooltip({
          // 不显示标题
          showTitle: false,
          // 显示辅助线
          showCrosshairs: true,
          // 辅助线类型为 xy 两个坐标轴都加辅助线
          crosshairs: {
            type: "xy",
          },
          // 自定义提示模板,注意这里的变量需要用 { } 包裹,且变量需要在 chart 映射的时候通过 tooltip 中进行定义
          itemTpl:
            '<li class="g2-tooltip-list-item" style="margin-bottom:4px;text-align: left;">' +
            '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
            "{name}<br/>" +
            "{value}" +
            "</li>",
        });
        // 映射图表
        this.chart
          .point()
          .position("height*weight")
          .color("gender")
          .shape("circle")
          .tooltip("gender*height*weight", (gender, height, weight) => {
            return {
              name: gender,
              value: height + "(cm), " + weight + "(kg)",
            };
          })
          // 几何图形绘制修改
          .style({
            fillOpacity: 0.85,
          });
        // 配置交互效果
        this.chart.interaction("legend-highlight");

        this.chart.render();
      });
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      this.chart.changeData(newValue);
    }
  },
  methods: {
    // 切换成不同形状
    changeShape(value) {
      const shapeList = value ? ["circle", "square"] : ["circle"];
      this.chart.clear();
      this.chart
        .point()
        .position("height*weight")
        .color("gender")
        // 根据 gender 设置不同形状
        .shape("gender", shapeList)
        .tooltip("gender*height*weight", (gender, height, weight) => {
          return {
            name: gender,
            value: height + "(cm), " + weight + "(kg)",
          };
        })
        .style({
          fillOpacity: 0.85,
        });
      this.chart.render();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>
